<template>
    <div class="searchDialog">
        <el-dialog
            v-model="data.isShowDialog"
            :show-close="false"
            @close="handleCloseDialog"
            width="35%"
            @opened="handleOpened"
            @open="handleOpen"
        >
            <template #header>
                <el-input
                    v-model="data.input"
                    class="searchInput"
                    placeholder="Search docs"
                    size="large"
                    clearable
                    @input="handleSearch"
                    ref="searchInputRef"
                >
                    <template #prefix>
                        <div class="loadingSvg" v-if="viewData.isLoading">
                            <img src="/public/images/loadingSvg.svg" alt="" />
                        </div>
                        <el-icon size="25" v-else><Search /></el-icon>
                    </template>
                </el-input>
            </template>
            <div class="center">
                <!-- 搜索结果 -->
                <el-scrollbar max-height="25rem" ref="scrollbarRef">
                    <template v-for="item in temp">
                        <BodyView
                            v-if="item.show"
                            :lists="item.result"
                            :title="item.title"
                            :type="item.type"
                            :icon="item.icon"
                            @arrowUp="handleUp"
                            @arrowDown="handleDown"
                        ></BodyView>
                    </template>
                    <!-- 空状态 -->
                    <el-scrollbar
                        height="20rem"
                        v-if="
                            store.data.historySearch.length === 0 &&
                            data.input === '' &&
                            store.data.collectSearch.length === 0
                        "
                    >
                        <el-empty description="No recent searches" />
                    </el-scrollbar>
                </el-scrollbar>
            </div>
            <template #footer><FooterView /></template>
        </el-dialog>
    </div>
</template>

<script setup lang="ts">
import FooterView from '@/components/search/components/footer.vue'
import BodyView from '@/components/search/components/body.vue'
import { Search } from '@element-plus/icons-vue'
import { data, resultData } from '@/components/search/components/headerSearch'
import { debounce } from 'lodash'
import { watch, ref } from 'vue'
import { headerSearchStore } from '@/store'
import type { ISearchListData } from '@/components/search/types'
import { useSetting } from '@/store'
const settingStore = useSetting()
const viewData = ref({
    isLoading: false,
})
const store = headerSearchStore()

const searchInputRef = ref()

const scrollbarRef = ref()
interface ITemp {
    searchLists: {
        title: string
        result: ISearchListData[] | undefined
        show: boolean
        type: 'folder' | 'clock' | 'star'
        icon: string
    }
    historyLists: {
        title: string
        result: ISearchListData[] | undefined
        show: boolean
        type: 'folder' | 'clock' | 'star'
        icon: string
    }
    collectLists: {
        title: string
        result: ISearchListData[] | undefined
        show: boolean
        type: 'folder' | 'clock' | 'star'
        icon: string
    }
}
const temp = ref<ITemp>({
    searchLists: {
        title: '搜索结果',
        result: undefined,
        show: false,
        type: 'folder',
        icon: 'FolderOpened',
    },

    historyLists: {
        title: '搜索历史',
        result: store.data.historySearch,
        show: true,
        type: 'clock',
        icon: 'Clock',
    },
    collectLists: {
        title: '收藏',
        result: store.data.collectSearch,
        show: true,
        type: 'star',
        icon: 'Star',
    },
})

const handleCloseDialog = () => {
    data.input = ''
}

const handleSearch = () => {
    if (data.searchLists !== undefined) {
        for (let i = 0; i < data.searchLists.length; i++) {
            data.searchLists[i].isActive = false
        }
    }
    debounceFn()
}

const getSearchData = async () => {
    if (data.input === '') {
        return
    }
    viewData.value.isLoading = true
    const res = await resultData()
    data.searchLists = res.data
    temp.value.searchLists.result = res.data
    viewData.value.isLoading = false
    if (data.searchLists !== undefined) {
        data.activeSearchIdx = 0
        data.searchLists.forEach((element, index) => {
            if (index === data.activeSearchIdx) {
                element.isActive = true
            } else {
                element.isActive = false
            }
        })
    }
}

const debounceFn = debounce(getSearchData, 500, {
    leading: true, // 延长开始后调用
    trailing: false, // 延长结束前调用
})

const handleOpened = () => {
    searchInputRef.value.focus()
}

const handleOpen = () => {
    if (store.data.historySearch.length === 0) {
        temp.value.historyLists.show = false
    }

    if (store.data.collectSearch.length === 0) {
        temp.value.collectLists.show = false
    }
    data.allStoreList = [...store.data.historySearch, ...store.data.collectSearch]
    data.activeIdx = 0
    data.allStoreList.forEach((element, index) => {
        if (index === data.activeIdx) {
            element.isActive = true
        } else {
            element.isActive = false
        }
    })
    if (settingStore.setting?.topSearchStyle) {
        document
            .getElementsByTagName('html')[0]
            .style.setProperty('--search-bg-primary', settingStore.setting.topSearchStyle)
    }
}
// 一、获取到isActive 为true 坐标  然后通过scrollBar 滚动到自定位置
const handleUp = (ycoord: number) => {
    scrollbarRef.value.scrollTo({ top: ycoord, behavior: 'smooth' })
}

const handleDown = (ycoord: number) => {
    scrollbarRef.value.scrollTo({ top: ycoord, behavior: 'smooth' })
}

watch(
    () => data.input,
    () => {
        if (data.input === '') {
            data.searchLists = undefined
            temp.value.searchLists.show = false
            temp.value.collectLists.show = true
            temp.value.historyLists.show = true
        } else {
            temp.value.searchLists.show = true
            temp.value.collectLists.show = false
            temp.value.historyLists.show = false
        }
    },
)

watch(
    () => store.data.historySearch,
    () => {
        temp.value.historyLists.result = store.data.historySearch
        if (store.data.historySearch.length !== 0) {
            temp.value.historyLists.show = true
        } else {
            temp.value.historyLists.show = false
        }
    },
)

watch(
    () => store.data.collectSearch,
    () => {
        temp.value.collectLists.result = store.data.collectSearch
        if (store.data.collectSearch.length !== 0) {
            temp.value.collectLists.show = true
        } else {
            temp.value.collectLists.show = false
        }
    },
)
</script>

<style scoped lang="scss"></style>
